<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom title="筛选" :isAppBtn="false"></HeadCustom>
		<view class="fboxRow filter-box">
			<view class="filter-left">
				<scroll-view scroll-y="true" class="scroll-Y" :style="{height: scrollHeight +'px'}">
					<template v-for="item in itemArr">
					<view class="nav-item font28 color-6B707C font-ell1" 
					:class="[intoView==item.value ? 'active' : 'color-6B707C']" 
					 v-if="item.isType.includes(type)"	:key="item.value" @click="move(item)">
						{{type == 'vita' ? item.label : item.label2}}
					</view>
					</template>
				</scroll-view>
			</view>
			<view class="filter-center flex1">
				<scroll-view scroll-y="true" class="scroll-Y" :style="{height: scrollHeight +'px'}" :scroll-into-view="intoView">
					<template v-for="(item, index) in itemArr">
					<view class="filter-item" v-if="item.isType.includes(type)" :key="index">
						<view class="tit fboxRow Ycenter mt32 lh44 font30" :id="item.value">
							{{type == 'vita' ? item.label : item.label2}} <text class="font22 color-6B707C" v-if="!item.isCheck">（单选）</text>
						</view>
						<view class="fboxWrap mt16">
							<view class="nav-item lh38 font-ell1 bg-21242C" :class="[filter[item.value] == '' ? 'active-btn': '']" @click="checkTap(item)">
								不限
							</view>
							<template v-if="item.isCheck">
								<template v-for="(cell, i) in item.list">
									<view class="nav-item lh38 font-ell1 bg-21242C"  v-if="cell.label != '经验不限'"
									:class="[filter[item.value].includes(cell.value) ? 'active-btn': '']" 
									@click="checkTap(item, cell)" :key="i">
										{{cell.label}}
									</view>
								</template>
							</template>
							<template v-else>
								<template v-if="item.value == 'expectCityId'">
									<view class="nav-item fboxRow Ycenter Xcenter lh38  bg-21242C" 
									:class="[filter[item.value] == cell.value ? 'active-btn': '']" 
									v-for="(cell, i) in item.list" 
									@click="goPage()" :key="i">
										<text class="font-ell1 mr24">{{cell.label}}</text>
										<u-icon name="arrow-down" color="#6B707C"></u-icon>
									</view>
								</template>
								<template v-else>
								<view class="nav-item lh38 font-ell1 bg-21242C" :class="[filter[item.value] == cell.value ? 'active-btn': '']" v-for="(cell, i) in item.list" 
								@click="checkTap(item, cell)" :key="i">
									{{cell.label}}
								</view>
								</template>
							</template>
						</view>
					</view>
					</template>
				</scroll-view>
			</view>
		</view>
		<view class="filter-space"></view>
		<view class="filter-btn-group">
			<view class="fboxRow Ycenter Xcenter">
				<view class="btn flex1 fboxRow Ycenter Xcenter font30 btn-gray" @click="clean">清除</view>
				<view class="btn flex1 fboxRow Ycenter Xcenter font30 color-141720 bg-linear" @click="save">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import {getIndustryList} from '@/api/card.js';
	import {configList} from './config.js';
	export default {
		data() {
			return {
				theme: getApp().globalData.appTheme,
				globalColor: getApp().globalData.globalColor,
				itemArr: [
					{
						label: '地区',
						label2: '地区',
						value: 'expectCityId',
						isCheck: false,
						isType: ['vita', 'job'],
						list: [{
							value: "110000",
							label: "北京"
						}]
					},
					{
						label: '年龄',
						value: 'age',
						isCheck: false,
						isType: ['vita'],
						list: configList.age
					},
					{
						label: '性别',
						value: 'gender',
						isCheck: false,
						isType: ['vita'],
						list: configList.gender
					},
					{
						label: '经验要求',
						label2: '经验',
						value: 'experienceList',
						isCheck: true,
						isType: ['vita', 'job'],
						list: configList.workExperience
					},
					{
						label: '学历要求',
						label2: '学历',
						value: 'educationList',
						isCheck: true,
						isType: ['vita', 'job'],
						list: configList.educationList
					},
					{
						label: '薪资待遇',
						label2: '薪资',
						value: 'salary',
						isCheck: false,
						isType: ['vita', 'job'],
						list: configList.salary
					}
				],
				scrollHeight: 0,
				intoView: '',
				filter:{
					expectCityId: '',
					expectCityName: '',
					age: '',
					gender: '',
					experienceList: [],
					educationList: [],
					salary: ''
				},
				type: 'vita' // job
			}
		},
		onLoad(option) {
			if(option && option.type){
				this.type = option.type
			}
			this.getInit()
		},
		onShow() {
			const filterTemp = getApp().globalData.filterTemp
			if(filterTemp.hasOwnProperty('expectCityId')){
				if(filterTemp.expectCityId){
					this.itemArr[0].list = [
						{
							value: filterTemp.expectCityId,
							label: filterTemp.expectCityName
						}
					]
				}
			}
			console.log(filterTemp)
			this.filter = {
				...this.filter,
				...filterTemp
			}
		},
		methods: {
			move(item){
				this.$nextTick(()=> {
					this.intoView = item.value
				})
			},
			getInit() {
				uni.getSystemInfo({success:(sys)=>{
					this.scrollHeight = sys.screenHeight - getApp().globalData.statusBarHeight - 160
				}})
			},
			checkTap(item, sub){
				if(!sub){
					this.filter[item.value] = item.isCheck ? [] : ''
				}else{
					if(item.isCheck){
						const index = this.filter[item.value].indexOf(sub.value)
						if(index != -1){
							this.filter[item.value].splice(index, 1)
						}else{
							this.filter[item.value].push(sub.value)
						}
					}else{
						this.filter[item.value] = sub.value
					}
				}
			},
			goPage(){
				getApp().globalData.filterTemp = this.filter
				this.$pageTo('/recruit/common/city?type=filter')
			},
			clean(){
				this.filter = {
					expectCityId: '',
					expectCityName: '',
					age: '',
					gender: '',
					experienceList: [],
					educationList: [],
					salary: ''
				}
				this.appCallback()
			},
			save(){
				getApp().globalData.filterTemp = this.filter
				uni.navigateBack({
					delta: 1
				})
				this.appCallback()
			},
			appCallback(){
				const data = {
					type: 'filter',
					data: {
						...this.filter,
						salaryMin: this.filter.salary && this.filter.salary.split('-')[0],
						salaryMax: this.filter.salary && this.filter.salary.split('-')[1],
						cityId: this.filter.expectCityId
					},
				};
				this.$bridge.callHandler('recruitHandler', data, () => {
					console.log('recruitHandler', '返回');
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-wrap{}
	.filter-box{margin-top: 48rpx;}
	.filter-left{width: 204rpx;border-right: 1rpx solid var(--backgroundDivisionColor);}
	.filter-left .nav-item{ padding: 0 24rpx 0 40rpx; height: 82rpx; line-height: 82rpx;color: var(--contentFontLightColor); }
	.filter-left .nav-item.active{color:var(--titleFontColor);font-weight: 600;}
	.filter-item{padding-bottom: 16rpx;}
	.filter-center{padding: 0 0 0 32rpx;}
	.filter-center .nav-item{ margin: 16rpx 16rpx 0 0; padding: 0 24rpx; width: 228rpx;height: 80rpx; line-height: 80rpx;text-align: center; border-radius: 8rpx;}
	.filter-space{height: 166rpx;}
	.filter-btn-group{position: fixed;left: 0;right: 0;bottom: 0; padding: 40rpx 40rpx 54rpx; height: 166rpx;background-color: var(--controllerBgColor)}
	.filter-btn-group .btn {height: 76rpx;border-radius: 12rpx;}
	.filter-btn-group .btn +.btn{margin-left: 24rpx;}
	.filter-center .active-btn{background: var(--pureButtonBackOneColor);color:var(--contourButtonTextColor);border: 1px solid var(--buttonOutlineOneColor)}
	.btn-gray{background: var(--translucenceButtonBackTwoColor);color: var(--contentFontFourColor);}
	
</style>
